<template>
    <view>
        <view class="info">
            <!-- 微信端 -->
            <!-- #ifdef MP-WEIXIN -->
            <view class="avatar xcx">
                <u-avatar
                    :src="LoginAdmin.avatar_cdn"
                    size="90"
                    v-if="JSON.stringify(LoginAdmin) !== '{}'"
                ></u-avatar>
                <!-- 如果没有获取到就会显示微信头像 -->
                <open-data type="userAvatarUrl" v-else></open-data>
            </view>
            <!-- #endif -->

            <!-- H5和APP端 -->
            <!--  #ifdef H5 || APP-PLUS -->
            <view class="avatar">
                <u-avatar
                    :src="LoginAdmin.avatar_cdn"
                    size="90"
                    v-if="JSON.stringify(LoginAdmin) != '{}'"
                ></u-avatar>
                <u-avatar src="/static/avatar.jpg" size="90" v-else></u-avatar>
            </view>
            <!-- #endif -->
        </view>

        <u-form
            :model="LoginAdmin"
            :rules="rules"
            ref="uForm"
            labelWidth="90"
            labelAlign="right"
        >
            <u-form-item label="昵称：" prop="nickname">
                <u--input v-model="LoginAdmin.nickname" border="bottom">
                </u--input>
            </u-form-item>

            <u-form-item label="邮箱：" prop="email">
                <u--input v-model="LoginAdmin.email" border="bottom">
                </u--input>
            </u-form-item>

            <u-form-item label="手机号：" prop="mobile">
                <u--input v-model="LoginAdmin.mobile" border="bottom">
                </u--input>
            </u-form-item>

            <u-form-item label="密码：">
                <u--input
                    v-model="LoginAdmin.password"
                    border="bottom"
                    password
                    placeholder="密码为空即不修改"
                >
                </u--input>
            </u-form-item>

            <u-form-item label="头像：">
                <u-upload
                    :fileList="fileList"
                    @afterRead="afterRead"
                    @delete="deletePic"
                    name="avatar"
                    :maxCount="1"
                >
                </u-upload>
            </u-form-item>
        </u-form>

        <u-button type="primary" text="确定" @click="onSubmit"></u-button>

        <u-toast ref="uToast"></u-toast>
    </view>
</template>

<script>
export default {
    data() {
        return {
            LoginAdmin: {
                nickname:'',
                email:'',
                mobile:''
            },
            rules: {
                nickname:{
                    type:'string',
                    required:true,
                    message:'请填写昵称',
                    trigger:['blur', 'change']
                },
                email:{
                    type:'email',
                    required:true,
                    message:'邮箱格式错误',
                    trigger:['blur', 'change']
                },
                mobile:[
                        {
                        type:'string',
                        required:true,
                        message:'请填写手机号',
                        trigger:['blur', 'change']
                    },
                    {
                        // 自定义验证函数，见上说明
                        validator: (rule, value, callback) => {
                            // 上面有说，返回true表示校验通过，返回false表示不通过
                            // uni.$u.test.mobile()就是返回true或者false的
                            return uni.$u.test.mobile(value);
                        },
                        message: '手机号码不正确',
                        // 触发器可以同时用blur和change
                        trigger: ['change','blur'],
                    }
                ]
            },
            fileList: [],
        };
    },
    methods: {
        deletePic() {
            this.fileList = [];
        },
        afterRead(file)
        {
            let avatar = file.file || '';

            if(avatar)
            {
                this.fileList = [
                    avatar
                ];
            }
        },
        onSubmit()
        {
            this.$refs.uForm.validate().then(async () => {
                let data = {
                    adminid:this.LoginAdmin.id,
                    nickname:this.LoginAdmin.nickname,
                    email:this.LoginAdmin.email,
                    mobile:this.LoginAdmin.mobile
                }

                // 如果有填写的，password == true
                if(this.LoginAdmin.password)
                {
                    data.password = this.LoginAdmin.password;
                }

                let avatar = this.fileList[0].thumb || '';

                // 存放服务器返回的结果
                let result = null;

                if(avatar)
                {
                    result = await this.$u.api.admin.profile({
                        name:'avatar',
                        filePath:avatar,
                        formData:data
                    });
                }else{
                    result = await this.$u.api.admin.profile(data);
                }

                if(result && result.code === 1)
                {
                    this.$refs.uToast.show({
                        type:'success',
                        message:result.msg,
                        complete:() => {
                            uni.setStorageSync('admin',result.data);

                            this.$u.route({
                                type:'back'
                            });
                        }
                    });

                    return;
                }else{
                    this.$refs.uToast.show({
                        type:'error',
                        message:result.msg,
                    });

                    return;
                }


            }).catch((err) => {
                console.error(err);
            });
        }
    },
    onReady() {
        this.$refs.uForm.setRules(this.rules);
        this.LoginAdmin = uni.getStorageSync('admin') || {};
    
        if(JSON.stringify(this.LoginAdmin) !== '{}')
        {
            this.fileList = [
                {
                    url:this.LoginAdmin.avatar_cdn
                }
            ]
        }
    
    },
};
</script>

<style>
.info {
    display: flex;
    padding: 40rpx;
    background-color: #f5f5f5;
    justify-content: center;
}
</style>
